<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="title" label="名称" width="180" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content" class="zzyqshowtag">
              <span>
                {{ scope.row.title }}
              </span>
            </div>
            <span class="ellipsis">{{ scope.row.title.slice(0, 10) }}...</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content" class="zzyqshowtag">
              <span>
                {{ scope.row.address }}
              </span>
            </div>
            <span class="ellipsis">
              {{ scope.row.address.slice(0, 15) }}...
            </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="head_img" label="封面图" width="180" align="center">
        <template slot-scope="scope">
          <img @click="imgpre(scope.row.head_img)" class="tableimg" :src="scope.row.head_img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="" label="线上展示" align="center">
        <template slot-scope="scope">
          <span class="clickSwitch" @click="clickSwitch">
            <el-switch v-model="scope.row.examSchool.state" disabled v-if="scope.row.examSchool.status == 0"></el-switch>
          </span>
          <el-switch v-model="scope.row.examSchool.state" :disabled="!checkPermission(['examplaceShow'])" v-if="scope.row.examSchool.status == 1"
            @change="
              changeStatus(scope.row.examSchool.state, scope.row.examSchool.id)
            "
            :active-value='1' :inactive-value='0'></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="是否自有考场" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.examSchool.is_own == 2">否</span>
          <span v-if="scope.row.examSchool.is_own == 1">是</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" align="center" :render-header="renderTip">
        <template slot-scope="scope">
          <span v-if="scope.row.examSchool.status == 0">待审核</span>
          <span v-if="scope.row.examSchool.status == 1">已通过</span>
          <el-tooltip class="item" effect="dark" :content="scope.row.examSchool.back_info" placement="top-start">
            <span v-if="scope.row.examSchool.status==2" class="cur">已驳回</span>
          </el-tooltip>

        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" align="center" v-if="checkPermission(['examplaceAdd','examplaceDelete'])">
        <template slot-scope="scope">
          <span class="edittext" v-if="checkPermission(['examplaceAdd'])" @click="editform(scope.row.id,scope.row.examSchool.id,scope.row.examSchool.status)">{{scope.row.examSchool.status==2?'编辑':'查看'}}</span>
          <span class="edittext" v-if="checkPermission(['examplaceDelete'])" @click="deleteitem(scope.row.examSchool.id)">
            删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.page"
          :page-sizes="[10, 20, 30]" :page-size="10" layout="total, sizes, prev, pager, next" :total="pages.total"></el-pagination>
      </el-col>
    </el-row>
    <!-- 图片预览插件 -->
    <el-image-viewer v-if="showViewer" :on-close="
        () => {
          showViewer = false
        }
      "
      :url-list="viewUrl" />
  </div>
</template>

<script>
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  import {
    updatestate
  } from '@/api/exam'
  //按钮权限验证
  import checkPermission from "@/utils/permission";
  export default {
    data() {
      return {
        //表格数据
        tableData: [],
        //页码数据
        pages: {},
        value: true,
        //是否显示预览图片
        showViewer: false,
        //预览图片数组
        viewUrl: [],
        currentPage4: 4,
      }
    },
    props: {
      //表格数据
      tabData: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    methods: {
      checkPermission,
      //审核状态 提示
      renderTip(h, {
        column
      }) {
        return h(
          'div', {
            style: 'display:flex;margin:0 auto; justify-content: center;',
          },
          [
            h('span', column.label),
            h('promptmessage', {
              props: {
                messages: ['提交的审核信息将在审核通过后才可同步展示'],
              },
            }),
          ]
        )
      },
      clickSwitch() {
        this.$message({
          type: 'info',
          message: '考场信息正在审核中!',
        })
      },
      //切换状态
      async changeStatus(val, id) {

        let state = val ? 0 : 1
        let params = {
          id: id,
          state: state,
        }
        let data = await updatestate(params)
        if (data.code == '0001') {
          this.$emit('switchBack')
          return
        }
        if (data.code == '0000') {
          this.$message({
            type: 'success',
            message: '修改成功!',
          })
          // this.switchState = true
        }
      },
      //编辑
      editform(id, examSchoolId, status) {
        let params = {
          id,
          type: 1,
          examSchoolId
        }
        if (status == 2) {
          params.type = 2
        }
        //显示dialog通知父组件打开弹窗
        this.$emit('openedit', params)



      },
      //删除
      deleteitem(id) {
        this.$emit('deleteitem', id)
      },
      imgpre(imgs) {
        //每次点击的时候清空数组
        this.viewUrl = []
        this.viewUrl.push(imgs)
        this.showViewer = true
      },
      handleSizeChange(val) {
        this.$emit('changepageTotal', val)
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.$emit('changepage', val)
        console.log(`当前页: ${val}`)
      },
    },
    components: {
      ElImageViewer,
    },
    mounted() {

    },
    watch: {
      tabData(val) {
        this.tableData = val.list
        this.pages = val.page
      },
    },
  }
</script>

<style scoped lang='scss'>
  .Tables {
    margin-top: 25px;
  }

  .edittext {
    margin: 0 10px;
    color: #4c68ef;
    cursor: pointer;
  }

  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .edittext {
    margin: 0 10px;
    color: #4c68ef;
    cursor: pointer;
    font-size: 13px;
  }

  .cur {
    cursor: pointer;
  }
</style>
